<script lang='ts' setup>

defineProps({
    title: {
        type: String,
    },
    subTitle: {
        type: String,
    },
    buttonText: {
        type: String
    }
})

const emits = defineEmits(["click"])

const clickHandler = () => {
    emits("click")
}
</script>
<template>
    <div class="flex flex-wrap items-center w-full line py-2 min-h-20">
        <img src="/console/exclaimation.png" alt="">
        <span class="w-30 font-bold text-sm">{{ title }}</span>
        <p class="flex-1 mb-0 min-w-50 py-5 mr-5">
            <span class="text-sm whitespace-normal break-words">{{ subTitle }}</span>
        </p>
        <a-button class="w-25 ml-auto" @click="clickHandler">{{ buttonText }}</a-button>
    </div>
</template>
<style lang='scss' scoped>
.line {
    border-top: 1px solid #e6ebf5;
    padding-right: 1.25rem;
}

img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    margin-left: 1rem;
}

// span {
//     white-space: nowrap;
// }</style>